* {
    box-sizing: border-box;
}

html,
body,
.page {
    margin: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
        Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
        Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.page {
    display: flex;
    flex-direction: column;
    background-color: #eee;
    max-width: 1024px;
    margin: auto;
}

.top {
    position: relative;
    z-index: 1;
    width: 100%;
    background-color: #d23e34;
    padding-top: 15px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
}

.top-title {
    text-align: center;
    font-size: 28px;
    color: #fff;
}

.tabs {
    padding: 15px;
}

.tabs>ul {
    margin: 0;
    display: flex;
    border-radius: 10px;
    background-color: #cd2523;
    overflow: hidden;
    padding: 0;
}

.tab-item {
    flex: 1;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    /*将鼠标光标设置为指针样式（通常是手型图标） */
    list-style: none;
    /* 移除列表项目符号 */

}

.tab-active {
    background-color: #b9211f;
}

.cats {
    padding: 15px;
    border-radius: 10px 10px 0 0;
    background-color: #fff;
}

.cat-list {
    display: flex;
    overflow-x: auto;
    padding: 0;
    margin: 0;
}

.cat-list::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条，使其不显示在页面上 */
}

.cat-item {
    line-height: 25px;
    background-color: #f7f7f7;
    font-size: 21px;
    color: #333;
    padding: 0 12px;
    border-radius: 5px;
    margin-right: 10px;
    white-space: nowrap;
    list-style: none;
}

.cat-active {
    background-color: #d23e34;
    color: #fff;
}

.list {
    position: relative;
    /*设置元素的定位方式为相对定位。这意味着元素的位置可以通过 top、right、bottom 或 left 属性进行调整，但不会影响其他元素的布局。*/
    width: 100%;
    flex: 1;
    /* 表示该元素在弹性容器（flex container）中将平均分配剩余空间*/
    overflow: auto;
    /*当内容超出容器尺寸时，浏览器会自动显示滚动条，允许用户滚动查看被截断的内容。*/
    padding: 15px;
}

.sku {
    display: block;
    /*将元素显示为块级元素，使其独占一行，并可以设置宽度、高度等属性。*/
    text-decoration: none;
    /*去除文本的装饰效果（如下划线），通常用于清除链接默认的下划线样式。*/
    border-radius: 10px;
    padding: 10px;
    background-color: #fff;
    margin-bottom: 10px;
    /*设置底部外边距为15像素，使每个 .sku 元素之间保持一定的间距。*/
}

.sku:last-child {
    margin-bottom: 0;
    /*:last-child 是一个伪类选择器，用来选择父元素中的最后一个子元素。
                        margin-bottom: 0;：将选中元素的底部外边距设置为0。*/
}



.cover-full {
    width: 100%;
    height: 20%;
    position: relative;
    overflow: hidden;
}

.cover-img {
    width: 100%;
    height: 280px;
    display: block;
    padding: 1% 1% 1% 1%;
    object-fit: cover;
    /* object-fit 属性用于指定如何缩放图片以适应其容器。cover 属性会填充整个容器，可能会裁剪图片。 */
}

.type-icon {
    background-color: #fbf9f9b8;
    border-radius: 5px;
    width: 20px;
}
.icon-img{
    /* 处于中间 */
    text-align: center;
    padding: auto;
    width: 20px;
     vertical-align: middle; /* 垂直居中对齐 */
    margin-left: 6px; 
  
}
.icon-text{
    color: #06030398;
}
.cover-rank {
    position: absolute;
    /* 设置元素为绝对定位。这意味着元素会相对于最近的已定位祖先元素（即设置了 position 为 relative、absolute 或 fixed 的祖先元素）进行定位。*/
    /*在这里，它会相对于 .cover 元素（因为 .cover 设置了 position: relative）进行定位。 */
    width: 80px;
    left: 0;
    /* 设置元素的左边缘与其包含块的左边缘对齐，即定位在最左边。 */
    top: 0;
    /* 设置元素的上边缘与其包含块的上边缘对齐，即定位在最上边。 */
    /*定位在左上方*/
}

.info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* display: flex;：将元素设置为弹性盒子（Flexbox）布局，使其子元素可以按照弹性布局规则进行排列。 */
    /* flex-direction: column;：设置弹性盒子的主轴方向为垂直方向（列），子元素将从上到下排列。 */
    /* justify-content: space-between;：在主轴方向（垂直方向）上，将子元素均匀分布，第一个元素靠顶，最后一个元素靠底，中间元素平均分布。 */
    flex: 1;
    margin-left: 10px;
    height: 90px;
}

.sku-title {
    color: #333;
    font-size: 20px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 当文本溢出时显示省略号（...）。 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* display: -webkit-box;：将元素显示为弹性伸缩盒子（WebKit私有属性）。 */
    /* -webkit-line-clamp: 2;：限制文本显示行数为2行（WebKit私有属性）。 */
    /* -webkit-box-orient: vertical;：设置伸缩盒的排列方向为垂直方向（WebKit私有属性）。 */
}


.type-item {
    padding: 2px 5px;
  background-color: #f7f7f7;
  border-radius: 3px;
  color: #999;
  font-size: 12px;
}

.price {
    color: #d23e34;
    font-size: 18px;
    font-weight: 600;
    /* 字体的粗细程度 100-900 */
     display: flex; /* 添加此行 */
    align-items: center;
}

.desc {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
}


.comment {
    background-color: #f7f7f7;
    padding: 10px;
    border-radius: 5px;
    margin-top: 15px;
    font-size: 19px;
    color: #666;
}

.comment strong {
    color: #333;
}

.desc-number {
    margin-left: 5px;
}

.desc .iconfont {
    margin-left: 20px;
}

.desc .icon-comment {
    margin-left: 0;
}